<template>

    <!-- 输入框 -->

<div>
    <!-- 数据单向绑定  :data表格数据 -->
  <el-table
      :data="dataList"
      style="width: 100%">
      <!-- prop属性  与此处数据的属性一致 -->
    <el-table-column prop="name"   label="姓名" width="120" ></el-table-column>
    <el-table-column prop="loginName"  label="昵称" width="120" ></el-table-column>
    <el-table-column prop="password"  label="密码" width="120" ></el-table-column>
    <el-table-column prop="age"    label="年龄" width="85" ></el-table-column>
    <el-table-column prop="gender" label="性别" width="85" ></el-table-column>
    <el-table-column prop="birthday" label="生日" width="200" :formatter="formatDate"></el-table-column>
    <el-table-column prop="phonenumber" label="电话" width="200" ></el-table-column>
    <el-table-column prop="address" label="地址" width="200" ></el-table-column>
    <el-table-column label="操作" width="200">
      <template slot-scope="scope">
        <el-button type="primary" size="small" icon="el-icon-edit"   circle @click="handleUpdate(scope.row)" >编辑</el-button>
      </template>
    </el-table-column>

    <!-- 编辑标签弹层 -->
    </el-table>

  <div class="add-form">
    <el-dialog title="编辑检查项" :visible.sync="dialogFormVisibleEdit">
      <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称" prop="loginName">
              <el-input v-model="formData.loginName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="formData.age">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-input v-model="formData.gender">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday">
              <el-input v-model="formData.birthday">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="电话" prop="phonenumber">
              <el-input v-model="formData.phonenumber">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="住址" prop="address">
              <el-input v-model="formData.address">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取消</el-button>
        <el-button type="primary" @click="handleEdit()">确定</el-button>
      </div>
    </el-dialog>

  </div>
</div>
</template>

<script>

export default {
  name: "MyView",
  data() {
    return {
      dataList: [],
      formData:{},
      loginName:this.$store.getters.getUser.loginName,
      dialogFormVisibleEdit: false,
      rules: {//校验规则
        loginName: [{ required: true, message: '管理员昵称为必填项', trigger: 'blur' }],
        password: [{ required: true, message: '管理员密码为必填项', trigger: 'blur' }],

      }
    }
  },
  //钩子函数，VUE对象初始化完成后自动执行
  created(){
    this.My()
  },
  methods: {
    My(){
      //console.log(loginName);
      console.log(this.$store.getters.getUser.loginName)
      axios.get(`http://localhost:8099/user/me/${this.$store.getters.getUser.loginName}`).then(res=>{
        this.dataList.push(res.data.data)
        console.log(res.data)
      }).catch(error=>{
        console.log(error)
      })

    },

    formatDate(row, column){
      let data = row[column.property]
      if(data == null) {
        return null
      }
      let date = new Date(data);
      var o = {
        "M+" : date.getMonth()+1,                 //月份
        "d+" : date.getDate(),                    //日
        "h+" : date.getHours(),                   //小时
        "m+" : date.getMinutes(),                 //分
        "s+" : date.getSeconds(),                 //秒
        "q+" : Math.floor((date.getMonth()+3)/3), //季度
        "S"  : date.getMilliseconds()             //毫秒
      };
      //var fmt = "yyyy-MM-dd hh:mm:ss";
      var fmt = "yyyy-MM-dd";
      if(/(y+)/.test(fmt)) {
        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
      }
      for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        }
      }
      return fmt ;
    },
    handleUpdate(row){
      axios.get(`http://localhost:8099/user/${row.id}`).then(response=> {
        console.log(response.data)
        if (response.data.code==200){
          this.dialogFormVisibleEdit=true
          this.formData=response.data.data
        }else {
          this.$message.error(response.data.code)
        }
      })
    },
    //编辑完成
    handleEdit(){
      //校验表单
      this.$refs["dataEditForm"].validate((valid)=>{
        if (valid){
          this.dialogFormVisibleEdit=false
          axios.post('http://localhost:8099/user/update',this.formData).then(response=>{
            if (response.data.code==200){
              this.$message.success(response.data.message)
            }else {
              this.$message.error(response.data.code)
            }
          })
        }else {
          this.$message.error('表单校验失败')
          return false
        }
      })
      location.reload()
    },
  }
}
</script>

<style scoped>

</style>